<script setup lang="ts">


import { ref, computed, watch } from "vue";


// h5 持久化 本地存储  关闭浏览器重新打开也还在
// localStorage.setItem("abc", "345")

// 读取出来
// const value = localStorage.getItem("ab4545c")
// console.log(value);

// 不管你存了什么类型的数据进去，都会帮你转成字符串
// localStorage.setItem("num", 100)

// 存复杂类型数据的时候，都需要先转成JSON字符串！！！ 
const obj = { a: 100, b: 200 }
localStorage.setItem("obj", JSON.stringify(obj))

const strObj = localStorage.getItem("obj")
if (strObj) {
  // 要使用 重新解析回原来的数据 
  const newObj = JSON.parse(strObj)
  console.log(newObj);
}

/* 
 h5  持久化 本地存储  localStorage
 1 存 localStorage.setItem(key,value)
 2 取 localStorage.getItem(key)

 3 存的时候 都会把数据转成字符串！！！ 类型！！ 
 4 存复杂类型数据  转成 json字符串
 5 读取复杂类型数据 解析回来 json....

 */




interface IGoods {
  id: number
  name: string
  price: number
  count: number
  checked: boolean
}

// 商品数组
//读取一下 类型 和 null
let tmpList=[]
const strLIst=localStorage.getItem("list"
)
if(strLIst){
  tmpList=JSON.parse(strLIst)
}
const list = ref<IGoods[]>(tmpList)


// 随机生成商品
const onAdd = () => {
  const goods: IGoods = {
    id: Date.now(),
    name: "手机" + Date.now(),
    price: 100,
    count: 1,
    checked: true
  }

  list.value.push(goods)
}

// 计算属性 总价格
const totalPrice = computed(() => {
  return list.value.reduce((a, b) => {
    if (b.checked) {
      return a + b.price * b.count
    } else {
      return a
    }

  }, 0)
})
const totalCount = computed(() => {
  return list.value.reduce((a, b) => {
    if (b.checked) {
      return a + b.count
    } else {
      return a
    }

  }, 0)
})
// 计算属性 + 数组every 计算是否全选  都是只读！！
// const isCheckedAll = computed(() => {
//   return list.value.length && list.value.every(item => item.checked)
// })

// 计算属性 默认是只读  修改成 读 写
const isCheckedAll = computed({
  get() {
    return list.value.length && list.value.every(item => item.checked)
  },
  set(v: boolean) {
    // 当修改 isCheckedAll set便会自动触发 v 等于要修改的结果
    // console.log("isCheckedAll 被修改了", v) 
    // v 映射到 原购物车数组中每一个商品上
    list.value.forEach(item => item.checked = v)

  }

})

/* 

1 全班同学 
2 检查后的结果
  1 isCheckedAll 安全 
  2 isCheckedAll 危险 

--- 
isCheckedAll = 安全 
*/

//监听数组的改变 持久化如果无效 配置深度监听 { deep: true }
watch(list,()=>{
  console.log("持久化")
  localStorage.setItem("list",JSON.stringify(list.value))
},{deep:true})


</script>

<template>
  <div class="page">
    <div class="tool">
      <button @click="onAdd">随机生成商品</button>
    </div>

    <div class="list">

      <div v-for="(item, index) in list" :key="item.id">

        <input type="checkbox" v-model="item.checked">

        <span>{{ item.name }}</span>
        <span>￥{{ item.price }}</span>
        <button @click="item.count--">-</button>
        <button>{{ item.count }}</button>
        <button @click="item.count++">+</button>

        <button @click="list.splice(index, 1)">删除</button>

      </div>
    </div>
    <div class="calc">
      <!-- 不能直接使用 双向绑定了  -->
      <!-- 复选框 只要 有 checked 属性 表示选中 -->
      <!-- 动态属性 : -->
      <!-- <input type="checkbox" :checked="isCheckedAll"> -->
      <input type="checkbox" v-model="isCheckedAll">
      全选
      <span>总价格:{{ totalPrice }}</span>
      <span>购买的数量:{{ totalCount }}</span>
    </div>
  </div>
</template>

<style scoped></style>

<!-- 
1 先写增加
2 写遍历
3 统计 总价格 总数量
4 选中
5 数量
6 删除

-->